<template>
  <yd-layout class="page-detail" v-if="isReady">
    <!-- 标题 -->
    <div class="page-title">
      <span>{{ $t("message.details") }}</span>
      <lang></lang>
    </div>
    <!-- end -->

    <!-- 标案信息 -->
    <div class="case__info">
      <h3 class="case__info-title">{{ info.case_name }}</h3>
      <div class="case__info__container">
        <p class="case__info__item">
          <span class="case__info-label">{{ $t("message.status") }}：</span>
          <span
            class="case__info-status z-notStart"
            v-if="info.bidding_state.value == 4"
            >{{ $t("message.notStart") }}</span
          >
          <span
            class="case__info-status z-ing"
            v-else-if="info.bidding_state.value == 6"
            >{{ $t("message.ing") }}</span
          >
          <span
            class="case__info-status z-end"
            v-else-if="info.bidding_state.value == 7"
            >{{ $t("message.end") }}</span
          >
        </p>
        <p class="case__info__item">
          <span class="case__info-label">{{ $t("message.startTime") }}：</span>
          <span class="case__info-text"
            >{{ info.begin_at | timeFormat }}（
            {{ info.bidding_area_name }} ）</span
          >
        </p>
        <p class="case__info__item">
          <span class="case__info-label"
            >{{ $t("message.estimatedTime") }}：</span
          >
          <span class="case__info-text"
            >{{ info.plan_bidding_time }} {{ $t("message.minute") }}
          </span>
        </p>
        <p class="case__info__item">
          <span class="case__info-label"
            >{{ $t("message.CaseNumber") }} ：</span
          >
          <span class="case__info-text">{{ info.case_no }}</span>
        </p>
        <p class="case__info__item">
          <span class="case__info-label">{{ $t("message.purchaser") }}：</span>
          <span class="case__info-text">{{ info.buyer_name }}</span>
        </p>
      </div>
    </div>
    <!-- end -->

    <!-- 标案说明 -->
    <div class="case__explain">
      <h4 class="case__explain-title">{{ $t("message.description") }}</h4>
      <div class="case__explain__container">
        <p class="case__explain__item">
          <span class="case__explain-label">{{ $t("message.buyType") }}：</span>
          <span class="case__explain-text">{{
            info.buy_type == "BUY_TYPE_MESSAGE"
              ? $t("message.info")
              : $t("message.engineering")
          }}</span>
        </p>
        <p class="case__explain__item">
          <span class="case__explain-label">{{ $t("message.area") }}：</span>
          <span class="case__explain-text">{{
            $t("message." + info.bidding_area)
          }}</span>
        </p>
        <p class="case__explain__item">
          <span class="case__explain-label"
            >{{ $t("message.inquiryNumber") }}：</span
          >
          <span class="case__explain-text">{{ info.inquiry_bill_no }}</span>
        </p>
        <div class="case__explain__item align-items-start">
          <span class="case__explain-label"
            >{{ $t("message.principle") }}：
          </span>
          <span class="case__explain-label">{{ $t("message.type") }}：</span>
          <span class="case__explain-text">{{
            info.bidding_tenet_type.value == 1
              ? $t("message.britishStyle")
              : $t("message.sealType")
          }}</span>
          <span class="case__explain-label f-group"
            >{{ $t("message.priceRegulatingUnit") }}：</span
          >
          <span class="case__explain-text">{{
            info.bidding_tenet_unit.value == 1
              ? $t("message.amountOfMoney")
              : $t("message.percentage")
          }}</span>
          <span class="case__explain-label f-group"
            >{{ $t("message.priceRange") }}：</span
          >
          <span class="case__explain-text">{{
            info.bidding_tenet_range.value == 1
              ? $t("message.fixed")
              : $t("message.unFixed")
          }}</span>
        </div>
        <p class="case__explain__item align-items-start">
          <span class="case__explain-label"
            >{{ $t("message.amountDescription") }}：</span
          >
          <span class="case__explain-text"> {{ offerDesc }} </span>
        </p>
        <p class="case__explain__item">
          <span class="case__explain-label">{{ $t("message.method") }}：</span>
          <span class="case__explain-text">{{
            info.bidding_type.value == 1
              ? $t("message.upBid")
              : $t("message.downBid")
          }}</span>
        </p>
        <p class="case__explain__item">
          <span class="case__explain-label"
            >{{ $t("message.currency") }}：</span
          >
          <span class="case__explain-text">{{ info.bidding_money_type }}</span>
        </p>
        <p class="case__explain__item" v-if="info.bidding_note">
          <span class="case__explain-label"
            >{{ $t("message.conditions") }}：</span
          >
          <span class="case__explain-text">{{ info.bidding_note }}</span>
        </p>
      </div>
    </div>
    <!-- end -->

    <!-- 案件明细 -->
    <div class="case__detail">
      <h4 class="case__explain-title">{{ $t("message.caseOrNameDetails") }}</h4>
      <div class="case__detail__tableContainer">
        <table class="case__detail__table" cellspacing="0" cellpadding="0">
          <tbody>
            <tr>
              <th>{{ $t("message.itemNumber") }}</th>
              <td v-for="(list, index) in info.details" :key="index">
                {{ index + 1 }}
              </td>
            </tr>
            <tr>
              <th>{{ $t("message.caseOrName") }}</th>
              <td v-for="(list, index) in info.details" :key="index">
                {{ list.name }}
              </td>
            </tr>
            <tr>
              <th>{{ $t("message.priceRegulatingUnit") }}</th>
              <td v-for="(list, index) in info.details" :key="index">
                {{
                  list.unit.value == 1
                    ? $t("message.amountOfMoney")
                    : $t("message.percentage")
                }}
              </td>
            </tr>
            <tr>
              <th>{{ $t("message.aM") }}</th>
              <td v-for="(list, index) in info.details" :key="index">
                {{
                  list.range.value == 1
                    ? $t("message.fixed")
                    : $t("message.unFixed")
                }}
              </td>
            </tr>
            <tr v-if="info.bidding_state.value !== 4">
              <th>{{ $t("message.startingPrice") + "(" + unit + ")" }}</th>
              <td v-for="(list, index) in info.details" :key="index">
                {{ list.begin_price | base64Decode }}
              </td>
            </tr>

            <tr v-if="info.bidding_state.value !== 4">
              <th>{{ $t("message.priceRange") }}</th>
              <td v-for="(list, index) in info.details" :key="index">
                {{ list.price_range }}
                {{ list.unit.value == 1 ? $t("message.yuan") : "%" }}
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
    <!-- end -->

    <!-- 竞标明细 注：用户还是上面class的样式 -->
    <div class="case__detail" v-if="info.bidding_state.value == 7">
      <h4 class="case__explain-title">{{ $t("message.biddingDetails") }}</h4>
      <div class="case__detail__tableContainer">
        <table class="case__detail__table" cellspacing="0" cellpadding="0">
          <tbody>
            <tr>
              <th>{{ $t("message.itemNumber") }}</th>
              <td v-for="(list, index) in info.details" :key="index">
                {{ index + 1 }}
              </td>
            </tr>
            <tr>
              <th>{{ $t("message.caseOrName") }}</th>
              <td v-for="(list, index) in info.details" :key="index">
                {{ list.name }}
              </td>
            </tr>
            <tr>
              <th>{{ $t("message.describe") }}</th>
              <td v-for="(list, index) in info.details" :key="index">
                {{ list.describe }}
              </td>
            </tr>
            <tr>
              <th>{{ $t("message.priceRegulatingUnit") }}</th>
              <td v-for="(list, index) in info.details" :key="index">
                {{
                  list.unit.value == 1
                    ? $t("message.amountOfMoney")
                    : $t("message.percentage")
                }}
              </td>
            </tr>
            <tr>
              <th>{{ $t("message.aM") }}</th>
              <td v-for="(list, index) in info.details" :key="index">
                {{
                  list.range.value == 1
                    ? $t("message.fixed")
                    : $t("message.unFixed")
                }}
              </td>
            </tr>
            <tr>
              <th>{{ $t("message.startingPrice") + "(" + unit + ")" }}</th>
              <td v-for="(list, index) in info.details" :key="index">
                {{ list.begin_price | base64Decode }}
              </td>
            </tr>
            <tr>
              <th>{{ $t("message.priceRange") }}</th>
              <td v-for="(list, index) in info.details" :key="index">
                {{ list.price_range }}
                {{ list.unit.value == 1 ? $t("message.yuan") : "%" }}
              </td>
            </tr>
            <tr>
              <th>{{ $t("message.operation") }}</th>
              <td v-for="(list, index) in info.details" :key="index">
                <button
                  v-show="showRecord"
                  class="btn-look"
                  @click="lookRecordEvent(list, index)"
                >
                  {{ $t("message.bidHistory") }}
                </button>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
    <!-- end -->

    <!-- 进入竞标室 按钮 -->
    <router-link
      :to="{ name: 'room', params: { id: info.id } }"
      tag="button"
      class="btn-goRoom"
      v-if="info.bidding_state.value == 6"
      >{{ $t("message.enter") }}</router-link
    >
    <!-- end -->

    <!-- 弹窗：出价记录 -->
    <yd-popup v-model="popup.isShow" position="bottom">
      <div class="bidRecord" v-if="popupData.length > 0">
        <i
          class="font_family icon-cha bidRecord-close"
          @click="closeLookPopup"
        ></i>
        <div class="bidRecord-header">
          <div class="bidRecord-title">{{ $t("message.bidHistory") }}</div>
        </div>
        <div class="bidRecord-body">
          <div class="bidRecord-name">
            <span>{{ $t("message.caseOrName") }}</span>
            <span>{{ popupName }}</span>
          </div>
          <div class="bidRecord__container">
            <table cellspacing="0" cellpadding="0">
              <thead>
                <tr>
                  <th>{{ $t("message.bidTime") }}</th>
                  <th>{{ $t("message.bidAmount") + "(" + unit + ")" }}</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="(list, index) in popupData" :key="index">
                  <td>{{ list.opAt | timeFormat3 }}</td>
                  <td>{{ list.bidding_price | base64Decode }}</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
      <div class="no__gid" v-else>
        <i class="font_family icon-yemianjiazaishibai"></i>
        <p class="no__gid-text">{{ $t("message.notBid") }}</p>
      </div>
    </yd-popup>
    <!-- end -->
  </yd-layout>

  <!-- 加载动画 -->
  <div class="skeleton__detail" v-else>
    <div class="skeleton__detail-bigTitle"></div>
    <div class="skeleton__detail__container">
      <h4 class="skeleton__detail-title"></h4>
      <p class="skeleton__detail-info speed-1"></p>
      <p class="skeleton__detail-info speed-2"></p>
      <p class="skeleton__detail-info speed-3"></p>
      <p class="skeleton__detail-info speed-4"></p>
      <p class="skeleton__detail-info speed-5"></p>
    </div>
    <div class="skeleton__detail__container">
      <h4 class="skeleton__detail-title"></h4>
      <p class="skeleton__detail-info speed-5"></p>
      <p class="skeleton__detail-info speed-4"></p>
      <p class="skeleton__detail-info speed-3"></p>
      <p class="skeleton__detail-info speed-2"></p>
      <p class="skeleton__detail-info speed-1"></p>
      <p class="skeleton__detail-info speed-2"></p>
      <p class="skeleton__detail-info speed-3"></p>
    </div>

    <div class="skeleton__detail__container">
      <h4 class="skeleton__detail-title"></h4>
      <table class="skeleton__detail-table" cellspacing="0" cellpadding="0">
        <tbody>
          <tr>
            <th></th>
            <td></td>
            <td></td>
          </tr>
          <tr>
            <th></th>
            <td></td>
            <td></td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script>
import { api__getInfo } from "../api";
import lang from "../components/lang";
import alert from "../components/alert";

export default {
  name: "detail",
  components: {
    lang,
    alert
  },
  async created() {
    try {
      let { data } = await api__getInfo(this.$route.params.id);
      this.info = data.case;
      this.showRecord = data.showRecord;
      this.isReady = true;
    } catch (err) {
      this.child_messagePopup = {
        isShow: true,
        type: "error",
        title: this.$t("message.tips"),
        text: err.msg
      };
    }
  },
  data() {
    return {
      isReady: false,
      showRecord: true,
      info: {},
      popup: {
        active: null, // 当前查看的是哪一个项次
        isShow: false,
        isReady: false
      },
      // 报错弹窗
      child_messagePopup: {
        isShow: false,
        type: "success",
        title: "标题",
        text: "描述"
      }
    };
  },
  computed: {
    popupData: function() {
      return this.popup.active !== null
        ? this.info.details[this.popup.active].priceList
        : [];
    },
    popupName: function() {
      return this.popup.active !== null
        ? this.info.details[this.popup.active].name
        : "";
    },
    // 出价金额说明
    offerDesc: function() {
      let baseText =
        this.$t("message.bidAmount") + "=" + this.$t("message.lastBidAmount");

      if (this.info.bidding_type) {
        baseText += this.info.bidding_type.value == 1 ? " +" : " -";
      }

      if (
        this.info.bidding_tenet_type.value == 1 &&
        this.info.bidding_tenet_unit.value == 1 &&
        this.info.bidding_tenet_range.value == 1
      ) {
        baseText +=
          "（" +
          this.$t("message.fixedAmplitudeModulation") +
          "*" +
          this.$t("message.adjustmentCoefficient") +
          "）";
      } else if (
        this.info.bidding_tenet_type.value == 1 &&
        this.info.bidding_tenet_unit.value == 1 &&
        this.info.bidding_tenet_range.value == 2
      ) {
        baseText += this.$t("message.inputPrice");
      } else if (
        this.info.bidding_tenet_type.value == 1 &&
        this.info.bidding_tenet_unit.value == 2 &&
        this.info.bidding_tenet_range.value == 1
      ) {
        baseText +=
          "（" +
          this.$t("message.startingPrice") +
          "*" +
          this.$t("message.percentageAmplitudeModulation") +
          "*" +
          this.$t("message.adjustmentCoefficient") +
          "）";
      } else if (
        this.info.bidding_tenet_type.value == 1 &&
        this.info.bidding_tenet_unit.value == 2 &&
        this.info.bidding_tenet_range.value == 2
      ) {
        baseText +=
          "（" +
          this.$t("message.startingPrice") +
          "*" +
          this.$t("message.inputPercentage") +
          " ）";
      } else if (
        this.info.bidding_tenet_type.value == 2 &&
        this.info.bidding_tenet_unit.value == 1 &&
        this.info.bidding_tenet_range.value == 1
      ) {
        baseText +=
          "（" +
          this.$t("message.fixedAmplitudeModulation") +
          "*" +
          this.$t("message.adjustmentCoefficient") +
          "）";
      } else if (
        this.info.bidding_tenet_type.value == 2 &&
        this.info.bidding_tenet_unit.value == 1 &&
        this.info.bidding_tenet_range.value == 2
      ) {
        baseText += this.$t("message.inputPrice");
      } else if (
        this.info.bidding_tenet_type.value == 2 &&
        this.info.bidding_tenet_unit.value == 2 &&
        this.info.bidding_tenet_range.value == 1
      ) {
        baseText +=
          "（" +
          this.$t("message.startingPrice") +
          "*" +
          this.$t("message.percentageAmplitudeModulation") +
          "*" +
          this.$t("message.adjustmentCoefficient") +
          "）";
      } else if (
        this.info.bidding_tenet_type.value == 2 &&
        this.info.bidding_tenet_unit.value == 2 &&
        this.info.bidding_tenet_range.value == 2
      ) {
        baseText +=
          "（" +
          this.$t("message.startingPrice") +
          "*" +
          this.$t("message.inputPercentage") +
          "）";
      }

      return baseText;
    },
    // 价格
    unit: function() {
      if (this.info.bidding_money_type == "RMB") {
        return this.$t("message.yuan");
      } else if (this.info.bidding_money_type == "TWD") {
        return this.$t("message.xtw");
      } else if (this.info.bidding_money_type == "USD") {
        return this.$t("message.dollar");
      } else {
        return "";
      }
    }
  },
  methods: {
    // 查询竞标后的详情显示
    lookRecordEvent(obj, index) {
      this.popup.active = index;
      this.popup.isShow = true;
    },
    // 关闭按钮 关闭查看详情弹窗
    closeLookPopup() {
      this.popup.isShow = false;
    }
  }
};
</script>
